<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式操作</title>
		<style>
			#box{
				width: 200px;
				height: 300px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<span>操作样式</span>
		<p>css作为html的辅助可以增强页面的显示效果，但不是每个浏览器都能支持最新的css能力。
		css的能力和DOM级别密切相关，所以我们有必要检测当前浏览器支持css能力的级别。DOM1级实现了最基本的文档处理，
		DOM2和DOM3在这个基础上增加了更多的交互能力。</p>
		<p>css的样式包括：<xmp>
		1行内：就是在标签里的style属性添加的样式
		2内联：就是<style></style>标签里书写的样式
		3链接：就是通过<link href=""/>标签链接到的样式 </xmp>
		</p>
		<hr style="height:3px;border:none;border-top:3px double red;" />
		
		<div id="box" style="color: red;;background: #ccc;font-size: 20px;float: right;">
			测试div
		</div>
		<div id="box1">
		测试div1
		</div>
	</body>
	
	<script>
		
/*		//检测浏览器是否支持DOM1级css能力或DOM2级css能力(ps 在ie 无效)
		alert(document.implementation.hasFeature('css','2.0'));
		alert(document.implementation.hasFeature('css2','2.0'));
		
		alert(document.implementation.hasFeature('HTML','1.0'));//ie*/
		
		var box = document.getElementById('box');
		var box1 = document.getElementById('box1');
		/*//使用行内获取属性
		
		alert(box.style);// [object CSSStyleDeclaration]
		alert(box.style.color);//red
		alert(box.style.fontSize);//20px
		alert(box.style.float); //float或styleFloat
		alert(box.style.styleFloat);//ie浏览器
		alert(box.style.cssFloat ||box.style.styleFloat);//兼容
		//赋值
	
		box1.style.color='blue';
		box.style.fontSize='24px';
		typeof box.style.cssFloat !='undefined' ?box.style.cssFloat ='right':box.style.styleFloat ='right';
		*/
		
		/*
		//DOM2级为style提供了一些属性方法（但是大多数都是不兼容的）
		alert(box.style.cssText);  //查看css文本
		
		//style属性只能获取和设置行内，不能获取内联和链接。
		//getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
		//var style = window.getComputedStyle("元素", "伪类");
		var style = window.getComputedStyle(box,null);
		alert(style);
		alert(style.width);
		//getComputedStyle不兼容ie IE特定的方法
		var styleIE -box.currentStyle;
		alert(style.color);   //ie计算后的样式（没有设置值为默认）*/
		
		//兼容
		var style = window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;
		alert(style);
		alert(style.width);
		//可以获取所有的样式，且获取的是计算后的样式
		alert(style.border);
	</script>
</html>
